<template>
    <el-menu background-color="#fff" :default-active="onRoutes" router>
        <el-menu-item index="/category">
            <span class="iconify" data-icon="mdi-light:chevron-double-down" style="color: gold;" data-width="30"
                data-height="30" data-rotate="270deg"></span>
            <span class="category">Category</span>
        </el-menu-item>
        <el-menu-item index="/product">
            <span class="iconify" data-icon="mdi-light:chevron-double-down" style="color: gold;" data-width="30"
                data-height="30" data-rotate="270deg"></span>
            <span class="product" index="/product">Product</span>
        </el-menu-item>
        <el-menu-item index="/item">
            <span class="iconify" data-icon="mdi-light:chevron-double-down" style="color: gold;" data-width="30"
                data-height="30" data-rotate="270deg"></span>
            <span class="item" index="/item">Item</span>
        </el-menu-item>
    </el-menu>
</template>
<script setup>
import { ref } from "vue";
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { computed, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

        const onRoutes = computed(() => {
            return route.path;
        });
// const viewCategory = function () {
//     window.location.href="http://localhost:3000/category";
// }
// const viewProduct = function () {
//     window.location.href="http://localhost:3000/allproduct";
// }
// const viewItem = function () {
//     window.location.href="http://localhost:3000/allItem";
// }


</script>

<style scoped>
</style>
